<template>
  <image
    :src="localSrc"
    :mode="mode"
    :style="{
      width: width,
      height: localHeight,
      'border-radius': circle ? '100%' : ''
    }"
    @click="click"
  ></image>
</template>

<script>
export default {
  externalClasses: ["custom-class"],
  data() {
    return {
      localSrc: "",
      localHeight: "200rpx"
    };
  },
  props: {
    src: {
      type: String,
      default: ""
    },
    height: String,
    width: {
      type: String,
      value: "200rpx"
    },
    // 默认，压缩缩放模式scaleToFill
    mode: {
      type: String,
      value: "scaleToFill"
    },
    // 是否圆角
    circle: {
      type: Boolean,
      value: false
    },
    // 是否支持预览
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.localHeight = this.height ? this.height : this.width;
    // 网络图片
    let localSrc = this.src;
    if (this.src.includes("//")) {
      localSrc = this.src;
    } else if (this.src.substr(0, 7) === "/upload") {
      localSrc = this.$store.state.config_url.imageUrl + this.src;
    }
    this.localSrc = localSrc.replace(/;/g, ",");
  },
  methods: {
    click() {
      if (this.isPreview) {
        wx.previewImage({
          urls: [this.localSrc] // 需要预览的图片http链接列表
        });
      }
      this.$emit("click");
    }
  }
};
</script>
